<template>
    <div class="detail-head">
        <div class="head-banner">
            <router-link to="/" class="icon-back"></router-link>
            <img :src="ajaxData.data.headImg" alt="" @click="$emit('click')">
            <ul>
                <li>{{ajaxData.data.title}}</li>
                <li><i class="icon-picture"></i><span>{{ajaxData.data.gallery.length}}</span></li>
            </ul>
        </div>


    </div>
</template>

<script>
    let that

    export default {
        name: "detail-head",
        inject:['ajaxData'],

        data() {
            return {
                showGallery: true,
                vstyle:{
                    position:'absolute',
                    left:0,
                    right:0,
                    top:0,
                    bottom:0,
                    overflow:'hidden'
                },
                saveStyle:{}
            }
        },
        methods: {
            galleryToggle() {
                this.showGallery = !this.showGallery
                this.saveStyle=document.body.style
                Object.assign(document.body.style,that.vstyle)
                if(!this.showGallery){
                    document.body.style = this.saveStyle
                }
            },
        },
        mounted(){
            that = this
        }


    }
</script>

<style lang="scss" scoped>
    .detail-head {
        .head-banner {
            height: 0;
            overflow: hidden;
            padding-bottom: 50%;
            position: relative;
            > a {
                position: absolute;
                left: .2rem;
                top: .2rem;
                color: #b1b1b1;
                font-size: .36rem;
                border-radius: 50%;
            }
            > img {
                width: 100%;
            }
            > ul {
                bottom: 0;
                width: 100%;
                position: absolute;
                display: flex;
                font-size: .28rem;
                margin-bottom: .24rem;
                li {
                    &:first-child {
                        width: 70%;
                        padding-left: .36rem;
                        color: #cfcfcf;
                    }
                    &:last-child {
                        color: #fff;
                        padding: 0 .1rem;
                        border-radius: .08rem;
                        line-height: .36rem;
                        background-color: rgba(255, 255, 255, 0.2);
                        width: 16%;
                        text-align: center;
                        font-size: .24rem;
                    }
                    span {
                        padding-left: .1rem;
                    }
                }
            }
        }

    }
</style>
